<td> 

<!------------------------------------------------------------------------>
	<script>
		
	reset();
	
	
	
	function createSupplier()
	{
		if(document.getElementById("supplierAction").value=="")
		{
			document.getElementById("supplierAction").value="create";
			document.getElementById("createSupplierBtn").value= "Cancel Create";
			
			document.getElementById("newSupplierRow").style.visibility = "visible";
			document.getElementById("saveSupplierBtn").disabled=false;
			document.getElementById("editSupplierBtn").disabled=true;
			document.getElementById("deleteSupplierBtn").disabled=true;
		}	
		
		else if(document.getElementById("supplierAction").value=="create")
		{
			document.getElementById("supplierAction").value="";
			document.getElementById("createSupplierBtn").value= "Create Item";
			
			reset();
		}
		
		
			
	}
	
	function editSupplier()
	{
		if(document.getElementById("supplierAction").value=="")
		{	
			document.getElementById("supplierAction").value="edit";
			document.getElementById("editSupplierBtn").value= "Cancel Edit";
		
			document.getElementById("newSupplierRow").style.visibility = "visible";	
			document.getElementById("createSupplierBtn").disabled=true;
			document.getElementById("saveSupplierBtn").disabled=false;
			document.getElementById("editSupplierBtn").disabled=false;
			document.getElementById("deleteSupplierBtn").disabled=true;	
			
			document.getElementById("newSupplierName").value = document.getElementById("name" +  document.getElementById("supplierSelectedId").value).textContent;
			document.getElementById("newSupplierPhone").value = document.getElementById("phone" +  document.getElementById("supplierSelectedId").value).textContent;
		}
		
		else if(document.getElementById("supplierAction").value=="edit")
		{
			document.getElementById("editSupplierBtn").value= "Edit Supplier";
			document.getElementById(document.getElementById("supplierSelectedId").value).style.backgroundColor ="gray";			
			reset();
					
		}
		
					
	}
	
	function saveSupplier()
	{
		
	}
	
	
	
	function selectSupplier(id)
	{
	
		if(document.getElementById("supplierAction").value=="")
		{
			
			if(document.getElementById("supplierSelectedId").value == "")
			{
				

				document.getElementById("supplierSelectedId").value=id;
				
				document.getElementById(document.getElementById("supplierSelectedId").value).style.backgroundColor ="yellow";
						
				document.getElementById("createSupplierBtn").disabled=true;
				document.getElementById("saveSupplierBtn").disabled=true;
				document.getElementById("editSupplierBtn").disabled=false;
				document.getElementById("deleteSupplierBtn").disabled=false;	
				
			}
			else
			{
				document.getElementById(document.getElementById("supplierSelectedId").value).style.backgroundColor ="gray";
			
				document.getElementById("supplierSelectedId").value = "";
				document.getElementById("createSupplierBtn").disabled=false;
				document.getElementById("saveSupplierBtn").disabled=true;
				document.getElementById("editSupplierBtn").disabled=true;
				document.getElementById("deleteSupplierBtn").disabled=true;	
			}
		}
		
	}
	
	function deleteSupplier()
	{
		document.getElementById("supplierAction").value="delete";
		document.supplierForm.submit();
	}
	

	
	function reset()
	{
		document.getElementById("newSupplierRow").style.visibility = "hidden";
	
		document.getElementById("createSupplierBtn").disabled=false;
		document.getElementById("saveSupplierBtn").disabled=true;
		document.getElementById("editSupplierBtn").disabled=true;
		document.getElementById("deleteSupplierBtn").disabled=true;	
		
		document.getElementById("supplierAction").value = "";
		document.getElementById("supplierSelectedId").value = "";
		
			
		document.getElementById("newSupplierName").value = "";
		document.getElementById("newSupplierPhone").value = "";
		
	}
	

	
	</script>
	
	<form name="supplierForm" action="#" method="post">
	
	<table class="content" style="height:450px; ">
	
	
	<tr><td>Supplier Contacts</td>
	<td>
		<input type="button" id="deleteSupplierBtn" value="Delete Supplier" class="right" onclick="return deleteSupplier()" disabled>
		<input type="button" id="editSupplierBtn" value="Edit Supplier" class="right" onclick ="return editSupplier()" disabled>
		<input type="submit" id="saveSupplierBtn" name="saveSupplierButton" value="Save Supplier" class="right" onclick="return saveSupplier()" disabled>
		<input type="button" id="createSupplierBtn" value="Create Supplier" class="right" onclick="createSupplier()">
		<input type="hidden" id="supplierAction" name="supplierAction" value="">
		<input type="hidden" id="supplierSelectedId" name="supplierSelectedId" value="">		
	</td>
	</tr>
	
	<tr><td colspan="2"><br></td></tr>
	<tr><td colspan="2"><div class="round2">
		<table id="supplier_table">
		
			<tr><th>Supplier Name<span class="red">*</span></th><th>Phone Number<span class="red">*</span></th></tr>
		
		</table></div>
		
		<div style="visibility:hidden" id="newSupplierRow">
			
			<table id="supplier_table">		
			<tr><td><input type="text" name="newSupplierName" id="newSupplierName"></td><td><input type="text" name="newSupplierPhone" id="newSupplierPhone"></td></tr>		
			</table>
			
		</div>
		
		<div style="overflow:hidden; overflow-y:auto; height:250px;">	
			<table id="supplier_table">
				<?php
				
					foreach($allSupplierContacts as $contact)
					{	
						echo "<tr id='".$contact->getSupplierId()."' onclick='selectSupplier(".$contact->getSupplierId().")'><td id='name".$contact->getSupplierId()."' value='".$contact->getName()."'>".$contact->getName()."</td><td id='phone".$contact->getSupplierId()."' value='".$contact->getPhoneNumber()."'>".$contact->getPhoneNumber()."</td></tr>";			
					}
				?>
				
	
			
			</table>
		</div>
		
	</td></tr>
	
	</table>
	
	</form>		
<!------------------------------------------------------------------------>
			
			</td>
		</tr>